O lo que es lo mismo grupo de imágenes que cambian al actualizar la página.
Las imágenes que debemos buscar deben ser de gran tamaño o de lo contrario no ocuparían todo el fondo ya que el código contiene no-repeat para que las imágenes que no alcanzan a ocupar todo el espacio no se repitan.
Con attachment:fixed las fijamos al fondo. En background añadimos el color que será el que se aprecie mientras carga la página. En Math.random añadimos la cantidad de imágenes (5*Math.random)
A más imágenes más líneas de código debemos añadir aumentando progresivamente el orden numérico al mismo tiempo que aumentamos el valor en Math.random.
¿Dónde lo añadimos? justo antes de la etiqueta </head>.

<script type='text/javascript'>
var banner= new Array()
banner[0]="URL-de-la-imagen"
banner[1]="URL-de-la-imagen"
banner[2]="URL-de-la-imagen"
banner[3]="URL-de-la-imagen"
banner[4]="URL-de-la-imagen"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background: #000 url("' + banner[random] + '") no-repeat center top; background-attachment:fixed;');
document.write(" }");
document.write("</style>");
</script>

Comprueba si funciona actualizando la página con la tecla f5.
No es extraño que las imágenes aparezcan también como fondo en la plantilla de diseño.
Dejo unas imágenes de la prueba que hice.








Miguel A.

Magnífico truco este para poder usarlo en los blogs, lo he hecho en uno de prueba y absolutamente genial. Gracias por tus aportaciones. Te mereces un premio. Pondré el truco en mi blog haciendo referencia al tuyo porque ésto merece la pena que se difunda.
http://soloantemiblog.blogspot.com

Responder
Anónimo

¿Esto no hace que pese más la página?

Responder
Gem@

Gracias por el comentario Admin :)

Ruperto depende de lo que tengas añadido en la plantilla, también por supuesto del tamaño y formato de la imagen.
Todo es probar y ver si los resultados son satisfactorios o por el contrario nos cea problemas.

Responder
Eroz

Holaaaaaa ya decía yo por que tanta visita del blog de Gem@ pensé ¿estaré de suerte acaso? jjajaaja pero cuando entro y veo bualaaa que aquí andaba entre un post.

Wooow la verdad no se como tomarlo traigo una sonrisota en mi cara y lo agradezco mucho.

Hablare un poco de mi experiencia acerca de este post:

Simplemente es maravilloso jajajaa lo tengo en 3 blogs (2 cerrados por que no tienen gran cosa entonces pa no mostrar nada pos mejor cerraditos) pero pues si es necesario se abren total el caso a ver es el fondo jajajaajaa.

Haaaaa si estaba en el fondo aleatorio, se me va el avión, es padre ya que cada que cambias de pagina cambia el fondo o cada que entras. Yo regularmente cada cierto tiempo le cambio el fondo para que crean que son muchos y no es así.

A mi no se me cargo mucho el blog no se como lo haga pero me imagino que solo se dedica a sacar una imagen o se conecte a tres y de ahí agarre la que se descargo primero en fin NO TENGO IDEA (aaaaaazu ya me estaba volando).

En fin las imágenes que ven son enooooooooormes y tengo trece imágenes.

Saludos y una vez mas gracias Gema =)

Responder
Anónimo

Me gusta mucho su blog de Eroz, es perfecto y quiero uno igual.

Gracias por compartir.

Responder
Anónimo

muy bueno.

Yo tengo uno para hacer random a las imágenes, aqui les dejo el código por si alguno está interesado, las imágenes pueden llevar un enlace tambien:


<script language="JavaScript">
var imagenumber = 4;
var randomnumber = Math.random();
var rand1 = Math.round( (imagenumber-1) * randomnumber);

images = new Array;
images[0] = "http://xr1a7w.bay.livefilestore.com/y1pINyKH4HnTeHLvFNe2fUowCFGMTgp_WsOI3wUNDUJO3TtyV5UO2HYeH4jXf78YJd-NStmN_gw3Hw/LUFFYBANNER.jpg";
images[1] = "http://xr1a7w.bay.livefilestore.com/y1phUP8EgCKftk6TgmNoRX6T_6XR97hFBdrqIREVZrTl6WTVOlwKGJGtXJKTRnkkqacSgHvIFVJ2mY/SANJIBANNER.jpg";
images[2] = "http://xr1a7w.bay.livefilestore.com/y1prUwL8E1mmwiLxA4DmyhNaktEYG-OIBhCWCNDHY513R0EbpdW26eZ_FB_UMzjzJ2DxPCOiB2Ah0I/ZOROBANNER.jpg";
images[3] = "http://xr1a7w.bay.livefilestore.com/y1pyVSyFrdy9xx7qOZpm3vxMKY3ElawFgG1DOHUSjqDOBPeDSjOOj1u2yghEMNoFNxsFjeQ7gld3YI/NAMIBANNER.jpg";
images[4] = "http://xr1a7w.bay.livefilestore.com/y1p5ieNC9mmXJ2FZYQl3UaATszm_2GNUguSQTWk_nWVewMSRrFBT_2PAMvS2zcvGNZNmR9akmdC6BA/USSOPBANNER.jpg";
images[5] = "http://xr1a7w.bay.livefilestore.com/y1pvTY1KTQIY7gPloVRL23h_qpacBPvcDeo7FC7jkjQphgUrSNYAqt3rjU3ezWm_ek9ZRt9UOWUY_8/NICOBANNER.jpg";
images[6] = "http://xr1a7w.bay.livefilestore.com/y1pdKzuArjGVAcu-RGj1YlM2zbwl2gfVySsuwGDSodU5wb8xinXF1VxZ-jmOQozPSZKlAXNiOQv1-g/CHOPPERBANNER.jpg";

links = new Array;
links[0] = "#";
links[1] = "#";
links[2] = "#";
links[3] = "#";

var image = images[rand1];
var link = links[rand1];
</script>

<script>document.write('<a href="'+link+'"><img src="'+ image +'" style="border: 0px;"></a>')</script>

Responder
Gem@

Gracias por dar tu opinión Eroz siempre se agradece :)

Armando pues ya sabes manos a la obra :)

Gracias Protegon :)

Responder
Anónimo

Esto si que es lindo.-

Voy a ver como lo implanto en mi blog de amigos, ya que en el principal no puedo.-

Abrazo Gem@. Feliz fin de semana!!!.-

Responder
Asuknamun

Probado y funcionando, pero tendré que editar algunas imágenes para que se aprecien mejor los fondos, en todo caso Gema tendrás por aquí en tu blog como darle transparencia solo al sidebar??

Responder
Gem@

Hola Birdelo, ya terminó el fin de semana pero es igual :) que tengas una linda semana.

Asuknamun si que tengo eso que buscas puedes verlo aquí :)

Responder
Anónimo

Hola gema me preguntaba si existe la posibilidad que pudieramos hacer una entrada, con imagen de fondo? me explico, una imagen que se use separada del fondo, como por ejemplo si queremos hacer una entrada navideña, y quisiera ponerle fondo solamente a esa entrada, como podriamos hacerle? o color por lo menos.

El unico lugar que he visto que tienen esta opcion es cuando haces una pagina en las comunidades MSN te dan la opcion de agregarle una imagen de fondo a cada pagina, existira esa opcion en las entradas de blogger? gracias.

Responder
Gem@

Anónimo siguiendo estos pasos puedes hacerlo. ;)
La primera explicacion para CSS te añade una misma imagen en todas las entradas.
La segunda con HTML únicamente en la entrada que deseas.

Responder
Gem@

Para anónimo ,si deseas añadir color a la entrada puedes hacerlo creando una tabla:
<table bgcolor="#E0FFCC"><tbody><tr><td>aqui el texto</td></tr></tbody></table>
Con HTML y CSS puedes crear tantas cosas como tu imaginación quiera. Miara esta otra entrada:
Efecto opacidad en un post.
Ya me dirás el resultado ;)

Responder
Tvriaso City Firm

jo! con lo bonito que parecia la cosa y a mi no me deja utilizarlo. ni siquiera aparece la imagen. ¿Cómo puedo al menos poner una imagen de fondo aunue luego no utilice el codigo que has puesto para que cambie cada vez que se actualiza? Es que si no me voy a comer mucho la cabeza.
gracias.

Responder
Gem@

Es extraño que no puedas aplicar el ramdon si seguiste los pasos, de todas formas si prefieres cambiar la imagen que tienes ahora ve a plantilla y busca:
body {
background: #333 url('http://img183.imageshack.us/img183/3198/patternpd0.jpg') repeat;

La url de la imagen es lo que debes sustituir, si la imagen es una textura se repetirá, si no lo es y quieres que se muestre completa añade:
background-repeat: no-repeat;
Si además deseas que la imagen quede estática:
background-attachment: fixed;
Para que te hagas una idea mira esta:
entrada
Cualquier cosa me avisas ;)

Responder
Miguel nev

gracias

Responder
Gem@

De nada Migues ;)

Responder
Anónimo

Funciono muy bien, gracias!!!

Responder
Huerta
Este comentario ha sido eliminado por el autor.
Responder
Huerta

ok, ya esta funcionando en el blog, divertido... se podría...hacer una precarga... de las imagenes... para evitar que carge dos veces el fondo...?¿ gracias ... si quereis echarle un ojo... ytuves.blogspot.com

Responder
Gem@

:: Peduwan no sé si podría conseguirse eso, lo comprobaré ;)

Responder
Huerta

Gracias Gemma ya estoy detrás de la pista... :D poner el estilo del body (el fondo) dentro de un noscript... para que no lo cargue de primeras si esta habilitado javascript y que cargue la imagen aleatoria... colocando el código en el head para que cargue lo primero posible la imagen. Asi nos evitamos la doble carga y queda más limpio el efecto.....Gracias de nuevo sigue asi... enseguida lo cambio en el blog.

Responder
Gem@

:: La idea es estupenda, ya me dirás el resultado si es el esperado :)

Responder
Fernanda y Roberto

Hola a todo los Bloggers !!!

Una pregunta, que si tengo 10 Paginas en mi Blog de blogger, puedo poner cada Pagina otra imagen?! Digo que si tengo 10 paginas, tb tengo 10 imagenes, asi cada pagina tendra su imagen propia?!

Gracias por vuestra ayuda !!!!

Responder
Fernanda y Roberto

Y una cosita mas, como puedo bajar el Header un poco mas (Magic Fiestas) en http://magicfiestas.blogspot.com/

Gracias por vuestra ayuda de nuevo :) !!!!

Responder
Gem@

:: No, cada página no tiene su imagen propia auqnue podría intentarse con html como cuando añadimos un fonde de color o imagen a las entradas.

Para bajar el header por ejemplo añadiendo padding-top en header-outer:

.header-outer {
background: none repeat scroll 0 0 transparent;
margin: 0;
padding-top: 30px;
}

Responder
Fernanda y Roberto

Gema eres un cielo !!!!!

Ya he podido bajar el Titulo, cuando lo dices tu todo parece tan facil, y yo buscando horas en google......

GRACIAS GRACIAS GRACIAS !!!!!!!!

Responder
Gem@

:: Fernanda y Roberto pues recién he contestado a las otras dudas :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top